<template>
  <view class="userLayout pagebg" >
    
    <view class="userInfo">
      <view class="avator">
        <image src="../../static/images/xxmLogo.png" mode="aspectFill"></image>
      </view>
      <view class="ip">100.100.100.101</view>
      <view class="address">来自于:山东</view>
    </view>
    
    <!-- 上边 -->
    <view class="section">
        <view class="list">
          <view class="row"  @click="topclassList">
              <view class="left">
                <uni-icons type="download-filled" size="20" color="#28b389"></uni-icons>
                <view class="text">我的下载</view>
              </view>
              <view class="right">
                <view class="text">0</view>
                 <uni-icons type="right" size="15" color="#28b389"></uni-icons>
              </view>
          </view>
          <view class="row" @click="topclassList">
              <view class="left">
                <uni-icons type="fire-filled" size="20" color="#28b389"></uni-icons>
                <view class="text">我的评分</view>
              </view>
              <view class="right">
                <view class="text">2</view>
                 <uni-icons type="right" size="15" color="#28b389"></uni-icons>
              </view>
          </view>
          <view class="row">
              <view class="left">
                <uni-icons type="weixin" size="20" color="#28b389"></uni-icons>
                <view class="text">联系客服</view>
              </view>
              <view class="right">
                <view class="text"></view>
                 <uni-icons type="right" size="15" color="#28b389"></uni-icons>
              </view>
              
              <!-- 是 微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序 的时候显示-->
              <!-- #ifdef MP -->
              <button open-type="contact">联系客服</button> 
              <!-- #endif -->
              <!-- 不是 微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序 的时候显示-->
              <!-- #ifndef MP -->
              <button @click="clickContact">拨打电话</button> 
              <!-- #endif -->
          </view>
        </view>
    </view>
    <!-- 下边 -->
    <view class="section">
        <view class="list">
          <!-- =================================================== -->
          <view class="row">
              <view class="left">
                <uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons>
                <view class="text">订阅更新</view>
              </view>
              <view class="right">
                <view class="text"></view>
                 <uni-icons type="right" size="15" color="#28b389"></uni-icons>
              </view>
          </view>
          <view class="row">
                <view class="left">
                  <uni-icons type="map-pin" size="20" color="#28b389"></uni-icons>
                  <view class="text">常见问题</view>
                </view>
                <view class="right">
                  <view class="text"></view>
                   <uni-icons type="right" size="15" color="#28b389"></uni-icons>
                </view>
            </view>
        </view>
    </view>

    
  </view>
</template>

<script setup>
  const clickContact=()=>{
    uni.makePhoneCall({
      phoneNumber:'19853831076'
    })
  }
    // 跳转到classLsit页面
  const topclassList=()=>{
    uni.navigateTo({
      url:'/pages/classlist/classlist'
    })
  }
</script>

<style scoped lang="scss">
         .userLayout{
           .section{
             width: 690rpx;
             margin: 50rpx auto;
             border: 1px solid #eee;
             border-radius: 10rpx;
             box-shadow: 0 0 30rpx rgba(0,0,0,0.05);
             .list{
               .row{
                 position: relative;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 padding: 30rpx;
                 height: 100rpx;
                 background-color: #fff;
                 border-bottom: 1rpx solid #eee;
                 &:last-child{border-bottom: 0;}
                 button{
                   position: absolute;
                   top: 0%;
                   left: 0;
                   height: 100rpx;
                   width: 100%;
                   opacity: 0;
                 }
                 .left{
                      display: flex;        
                      align-items: center;
                      .text{
                        color:#666;
                        padding-left: 20rpx;
                      }
                 }
                 .right{
                      display: flex;
                      align-items: center;
                      .text{
                        color:#aaa;
                        font-size: 28rpx;
                        padding-left: 20rpx;
                      }
                 }
               }
             }
           }
             .userInfo{
               display: flex;
               justify-content: center;
               align-items: center;
               flex-direction: column;
               padding: 50rpx 0;
               .avator{
                 width: 160rpx;
                 height: 160rpx;
                 border-radius: 50%;
                 overflow: hidden;
                 image{
                   width: 100%;
                   height: 100%;
                 }
               }
               .ip{
                 font-size: 44rpx;
                 color: #333;
                 padding: 20rpx 0 5rpx;
               }
               .address{
                 font-size:28rpx;
                 color: #aaa;
               }
             }
         }
</style>
